<template>
  <div class="big-box">
    <div class="box mx-auto rounded py-3 px-4">
    <h1 class="text-center font-20 mb-4" ref="myh1">
      <router-link to="/login">登录</router-link>
      <span>·</span>
      <router-link to="/register">注册</router-link>
    </h1>

    <el-form ref="myform" :model="form" :rules="rules" status-icon>
      <el-form-item label="" prop="regname">
        <el-input
          v-model="form.regname"
          placeholder="用户名"
          prefix-icon="el-icon-user-solid"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="regpass">
        <el-input
          v-model="form.regpass"
          type="password"
          placeholder="密码"
          show-password
          prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="regpass2">
        <el-input
          v-model="form.regpass2"
          type="password"
          placeholder="确认密码"
          show-password
          prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>

      <el-button type="success" class="login-btn" @click="regfn('myform')" :loading="isLoad"
        >注册</el-button
      >
    </el-form>
  </div>
  </div>
</template>

<script>
import { register } from '@/api/user';
export default {
  data() {
    let valiRegUserName = (rule, value, callback) => {
      let regname = /^\w{5,12}$/;
      if (regname.test(value)) {
        callback();
      } else {
        callback(new Error("用户名必须字母、数字、下划线组成，5-12位"));
      }
    };
    let valiregpass2 = (rule, value, callback) => {
      if (value === this.form.regpass) {
        callback();
      } else {
        callback(new Error("两次密码不一致！"));
      }
    };
    return {
      isLoad: false,
      form: {
        regname: "",
        regpass: "",
        regpass2: "",
      },
      rules: {
        regname: [{ validator: valiRegUserName, trigger: "blur" }],
        regpass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 12,
            message: "长度在 5 到 12 个字符",
            trigger: "blur",
          },
        ],
        regpass2: [{ validator: valiregpass2, trigger: "blur" }],
      },
    };
  },

  methods: {
    regfn(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          this.isLoad = true;
          register(this.form).then((r) => {
            this.isLoad = false;
            if (r.data.code === 1) {
              this.$message({
                message: "用户名已经存在",
                type: "warning",
              });
            }
            
            if (r.data.code === 0) {
              this.$message({
                message: "注册成功",
                type: "success",
              });
              this.form = {
                regname: "",
                regpass: "",
                regpass2: "",
              };
              setTimeout(() => {
                // 跳转到登录
                // this.$router.push("/login");
                this.$router.push({path:'/login'});
              }, 500);
            }
          });
        } else {
          console.log("验证不通过");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.big-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: url(../assets/images/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
.box {
  width: 350px;
  min-height: 200px;
  margin-top: 200px;
  background-color: #fff;
   box-shadow: 0px 0px 8px 4px rgb(165, 210, 240);
  span {
    margin: 0 20px;
    color: #888;
  }
  a {
    color: #888;
  }
}

a.router-link-active {
  color: orangered;
  border-bottom: 2px solid orangered;
  padding-bottom: 6px;
}

.login-btn {
  width: 100%;
}
</style>